<template>
  <view class="mall-item-detail">

    <!-- 价格和图片部分 -->
    <view class="mall-item-detail__wrapper">

      <banner-swiper
          :swiper-items="swiperItems"
      ></banner-swiper>

      <view class="mall-item-detail__sale flex">
        <view class="mall-item-detail__price flex">
          <text class="mall-item-detail__price-discount">¥{{mallItem.sale_price}}</text>
          <text class="mall-item-detail__price-original">{{mallItem.original_cost}}</text>
        </view>

        <text>已售{{mallItem.sales_quantity}}</text>
      </view>

      <text class="mall-item-detail__name">{{mallItem.name}}</text>

    </view>

    <!-- 商品的运费，参数信息 -->
    <view class="mall-item-detail__wrapper">
      <view class="mall-item-detail__size flex">
        <view class="mall-item-detail__size-box">
          <text>已选</text>
          <text class="mall-item-detail__size-text"
                v-for="(item,index) in mallItem.merge_attr_datas"
                :key="`itemSize${index}`"
                :class="{'mall-item-detail__size-text--active':index===0}"
          >{{item}}</text>
        </view>
        <image class="mall-item-detail__size-arrow" src="/static/mall/back.png" mode="aspectFill"></image>
      </view>

      <view class="mall-item-detail__shipping">
        <text>运费</text>
        <text class="mall-item-detail__shipping-text">{{mallItem.post_price}}</text>
      </view>

      <view class="mall-item-detail__params flex">
        <view class="mall-item-detail__params-box">
          <text>参数</text>
          <text class="mall-item-detail__params-text">货号 {{mallItem.brand_id}}</text>
          <text class="mall-item-detail__params-text">品牌 {{mallItem.brand_name}}</text>
          <text class="mall-item-detail__params-text">产地 {{mallItem.made_in}}</text>
        </view>

        <image class="mall-item-detail__params-arrow" src="/static/mall/back.png" mode="aspectFill"></image>
      </view>
    </view>

    <!-- 商品评价 -->
    <!-- 		<view class="mall-item-detail__wrapper">

        </view> -->



    <!-- 		<view class="mall-item-detail__wrapper">
          <view v-html="mallItem.description"></view>
        </view> -->

    <!-- 相关推荐 -->
    <view class="mall-item-detail__wrapper mall-item-detail__sub-title">
      相关推荐
    </view>

    <view class="mall-item-detail__wrapper">
      <!-- 推荐事物的渲染 -->
      <view class="mall-item-detail__recommend-items">
        <mall-ver-item
            v-for="item in recommendItems"
            :key="item.id"
            :item="item"
            class="mall-item-detail__recommend-item"
        ></mall-ver-item>
      </view>
    </view>

    <!-- 商家 客服 购物车部分 -->
    <view class="mall-item-detail__footer flex">
      <view class="mall-item-detail__footer-box flex-column">
        <image class="mall-item-detail__footer-icon" src="/static/mall/application.png" mode="aspectFill"></image>
        <text>商家</text>
      </view>

      <view class="mall-item-detail__footer-box flex-column">
        <image class="mall-item-detail__footer-icon" src="/static/mall/earphone.png" mode="aspectFill"></image>
        <text>客服</text>
      </view>

      <view class="mall-item-detail__footer-box flex-column" @click="navToCart">
        <image class="mall-item-detail__footer-icon" src="/static/mall/addToCart.png" mode="aspectFill"></image>
        <text>购物车</text>
      </view>

      <view class="flex">
        <view class="mall-item-detail__add-cart-btn" @click="onClick_add_to_cart">
          加入购物车
        </view>

        <view class="mall-item-detail__purchase-btn">
          立即购买
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { onMounted, ref } from 'vue';
import decMallApi from "/api/dec/decIndex/decMallApi";
import bannerSwiper from '@/components/bannerSwiper/bannerSwiper.vue'
import mallVerItem from '../components/mallVerItem/mallVerItem.vue'

// 全局状态globalData
import { storeToRefs } from 'pinia';
import { useGlobalDataStore } from '@/globalData.js';
const { globalData } = storeToRefs(useGlobalDataStore());

// 单个商品
const mallItem = ref();

const swiperItems = ref();

// 推荐商品
const recommendItems = ref();

const baseImgUrl = 'https://upload.gfinter.net/';

// 获得商品详情
async function Product_detail(params){
  // const {id} = params.id;
  try{
    const res = await decMallApi.Product_detail_API(params);
    mallItem.value = res.datas || null;

    // mallItem.value.merge_attr_datas = [];

    if(res.datas.attr_datas){
      let retArr = [];
      let tempArr = [];

      for(let item1 of res.datas.attr_datas){
        if(retArr.length===0){
          retArr = item1.datas;
          continue;
        }

        tempArr = [];

        for(let item2 of retArr){
          for(let item3 of item1.datas){
            let tempStr = item2 + '/' + item3
            tempArr.push(tempStr);
          }
        }

        retArr = tempArr;
      }

      mallItem.value.merge_attr_datas = retArr;
    }

    // mallItem.value.datas.product_scroll = baseImgUrl+mallItem.value.product_scroll
    if(res.datas.product_scroll){
      swiperItems.value = [
        {id:'mallItemSwiper01',advertisement_pic:baseImgUrl+res.datas.product_scroll}
      ]
    }



    console.log('Product_detail 获取成功',res);
    console.log('Product msg: ', mallItem.value)

    // console.log(mallItem.value.merge_attr_datas);
  }catch(err){
    console.log('Product_detail 获取失败',err);
  }
}

// 推荐商品
async function Mall_home_list(){
  let params ={
    page:1,
    per_page:10
  }
  try{
    let res = await decMallApi.Mall_home_list_API(params);
    // res.forEach((item)=>{
    // 	item.logo = baseImgUrl+item.logo;
    // })
    recommendItems.value = res.datas||null;
    // bannerSwiperItems.value = res.adver||null;
    if(recommendItems.value!==null){
      recommendItems.value.forEach((item)=>{
        item.logo = baseImgUrl+item.logo;
      })
    }

    console.log('Mall_home_list 商详情页面获取商品推荐成功',res);
    console.log(recommendItems.value);
  }catch(err){
    console.log('Mall_home_list 商城详情页面获取商品推荐失败',err);
  }
}

// 获得商品评价
async function Get_product_evaluate_list(params){
  try{
    let res = await decMallApi.Get_product_evaluate_list_API(params);
    console.log('Get_product_evaluate_list 获取成功',res);
  }catch{
    console.log('Get_product_evaluate_list 获取失败',err);
  }
}

async function init(params){
  await Product_detail(params);
  await Mall_home_list();
  // await Get_product_evaluate_list(params);
}

const navToCart = ()=>{
	// 进入购物车前判断有无用户信息，没有则重定向至登录页面
	if(globalData.value.isLoggedIn === false){
		uni.navigateTo({
			url: `/pages/login/login`
		});
		uni.showToast({
			title: '请登录',
			icon: 'error',
			duration: 2000,
			
		});
		return;
	}
	
	console.log("进入购物车: globalData: ", globalData.value)
	uni.navigateTo({
		url:`/components/mall/cartDetails`
	})
}

const onClick_add_to_cart = async ()=>{
	const params = {
		product_id: mallItem.value.id,
		product_data_id: 1,
		count: 1,
		order_source: 1,
		purpose: 1,
		visit_gfid: globalData.value.VISIT_DATA.visit_gfid
	};
	
	const res = await decMallApi.Add_product_to_shopping_car_API(params)
	console.log("add to cart :", res)
}

onLoad((query)=>{
  // console.log('query参数',query);
  const id = query.id||null;

  if(id!==null){
    let params = {
      product_id:id
    }
    init(params);
  }

})
</script>

<style lang="scss" scoped>
.mall-item-detail{
  width: 100%;
  background-color: #f7f7f9;
  &__wrapper{
    width: 100%;
    // height: auto;
    box-sizing: border-box;
    padding: 20rpx 24rpx;
    background-color: #fff;
    margin-bottom: 12rpx;
  }

  &__sale{
    justify-content: space-between;
  }

  &__price{
    margin-bottom: 16rpx;
    &-discount{
      font-size: 45rpx;
      color: #fe5100;
      padding-right: 31rpx;
    }

    &-original{
      font-size: 26rpx;
      color:#808080;
      position: relative;
      width: fit-content;
      display: inline-block;
      &::before{
        content: '';
        position: absolute;
        width: 100%;
        height: 2rpx;
        top: 50%;
        transform: translateY(-50%);
        background-color: #808080;
      }
    }
  }

  &__name{
    font-size: 30rpx;
    color:#333333;
  }

  &__size,&__shipping,&__params{
    font-size: 26rpx;
    color: #28292a;
    margin-bottom: 20rpx;
    justify-content: space-between;
  }

  &__params{
    margin-bottom: 0;
  }

  &__size-box,&__params-box{
    width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }


  &__size-text,&__shipping-text,&__params-text{
    color: #767676;
    padding-left: 20rpx;
  }

  &__size-arrow,&__params-arrow{
    width: 20rpx;
    height: 20rpx;
  }

  &__size-text--active{
    color: #fe5100;
  }

  &__sub-title{
    height: 70rpx;
    // line-height: 70rpx;
    display: flex;
    align-items: center;
    background-color: #f7f7f9;
    font-size: 30rpx;
    color: #28292a;
  }

  // 推荐部分
  &__recommend{
    &-items{
      width: 100%;
      // margin: 0 auto;
      box-sizing: border-box;
      // padding: 0 24rpx;
      display: grid;
      grid-template-rows: auto;
      grid-template-columns: repeat(2,326rpx);
      row-gap: 20rpx;
      justify-content: space-between;
    }

  }

  // 底部部分
  &__footer{
    width: 100%;
    height: 120rpx;
    font-size: 24rpx;
    color: rgba(#171a1d,.8);
    justify-content: space-between;
    position: fixed;
    bottom: 50rpx;
    &-box{
      width: 120rpx;
      height: 100%;
      justify-content: space-around;
      align-items: center;
    }
    &-icon{
      width: 40rpx;
      height: 40rpx;
    }
  }

  &__add-cart-btn,&__purchase-btn{
    width: 180rpx;
    height: 120rpx;
    background-color: #fa6401;
    font-size: 30rpx;
    color: #fff;
    text-align: center;
    line-height: 120rpx;
  }

  &__purchase-btn{
    background-color: #e02020;
  }
}
</style>
